<template>
    <div>
        <div>
            <Breadcrumb name1="后台管理" name2="集团关系"></Breadcrumb>
            <el-card>
                <div class="search">
                    <div class="search-up">
                        <span>搜索</span>
                        <el-button @click="addDialog=true" style="border: 1px solid #0846B9;color:#0846B9">+新增</el-button>
                    </div>
                    <div class="i"><i class="el-icon-caret-top"></i></div>
                    <div class="search-down">
                        <span>集团名称:</span>
                        <el-input class="search-input" v-model="searchKeyword" clearable size="mini"></el-input>
                        <div class="search-down-btn">
                            <el-button size="small" @click="search" style="color:white;background-color: #0846B9">搜索</el-button>
                            <el-button size="small" @click="resetsearch" style="border: 1px solid #0846B9;color:#0846B9">重置</el-button>
                        </div>
                    </div>
                </div>
                <div class="wrapper">
                    <!-- 表格 -->
                    <el-table :data="relationList.slice((pageIndex-1)*pageSize,pageIndex*pageSize)" 
                    style="width: 100%" v-loading="loading">
                        <el-table-column type="index" label="序号" width="65" align="center"></el-table-column>
                        <el-table-column prop="organization_name" label="集团名称" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" @click="RelationDialog(scope.row.organization_id,scope.row.organization_name)">
                                    {{scope.row.organization_name}}
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="organization_phone" label="联系电话" width="180" align="center"></el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="page">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="relationInfo.pageIndex"
                            :page-sizes="[1, 2, 5, 10]"
                            :page-size="relationInfo.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalRecords">
                        </el-pagination>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 新增的对话框 -->
        <el-dialog
            title="新增集团关系"
            :visible.sync="addDialog"
            width="50%"
            append-to-body>
            <el-form :model="addRelationForm" :rules="RelationFormRules"
                ref="addRelationFormRef" label-width="150px">
                <el-form-item label="集团名称：" prop="organization_pid">
                    <el-select v-model="addRelationForm.organization_pid" placeholder="请选择">
                        <el-option v-for="(item,index) in pOrganization" :key="index"
                        :label="item.organization_name" :value="item.organization_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="子公司：" prop="organization_id">
                    <el-select v-model="addRelationForm.organization_id" placeholder="请选择">
                        <el-option v-for="(item,index) in cOrganization" :key="index"
                        :label="item.organization_name" :value="item.organization_id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- 确认取消事件 -->
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addRelation">提交</el-button>
                <el-button @click="addDialog = false">取消</el-button>
            </span>
        </el-dialog>

        <!-- 集团关系设置的对话框 -->
        <el-dialog
            title="集团关系"
            :visible.sync="relationDialog"
            v-if="relationDialog"
            width="65%"
            append-to-body>
            <RelationDialog :f_organization_pid="f_organization_pid"
                        :f_organization_pname="f_organization_pname"></RelationDialog>
        </el-dialog>
    </div>
</template>

<script>
import { request } from '../../../../api/axios'
import Breadcrumb from "../components/Breadcrumb.vue"
import RelationDialog from "./RelationDialog.vue"

export default {
    name:"Relation",
    components:{Breadcrumb,RelationDialog},
    data(){
        return{
            // 获取角色列表的参数
            relationInfo:{
                ilist: [
                    {
                    title: "string",
                    content: "string"
                    }
                ]
            },
            // 分页
            pageIndex: 1,   //第几页
            pageSize: 10,   //一页几条
            // 获取到的角色列表数据
            relationList:[],
            totalRecords:0,
            locallist:"",   //搜索事件时数据暂存至locallist中
            loading:true,

            // 搜索框输入的关键词
            searchKeyword:"",
            // 搜索结果
            searchResult:[],
            searchResultRecords:0,

            // 新增对话框的显示与隐藏
            addDialog:false,
            // 新增的参数
            addRelationForm:{
                organization_pid:"",
                organization_id:""
            },
                // 获取来的父集团
                pOrganization:[],
                // 获取来的子集团
                cOrganization:[],

            // 集团关系对话框的显示与隐藏
            relationDialog:false,
            // 点击父集团传给RelationDialog的organization_pid
            f_organization_pid:"",
            f_organization_pname:"",

            // 表单验证规则
            // 新增表单的规则
            RelationFormRules:{
                organization_pid:[{required:true,message:"请选择集团名称",trigger:"blur"},],
                organization_id:[{required:true,message:"请选择子公司",trigger:"blur"},]
            }
        }
    },
    created(){
        this.getRelationList();
        this.getpOrganization()
        this.getcOrganization()
    },
    methods:{
        // 集团关系父查询列表
        getRelationList(){
            request("post","/Organization_Relation/GetEntfuInfo",this.relationInfo)
            .then(res =>{
                console.log(res)
                this.relationList=res.resultList
                this.totalRecords=res.totalRecords
                this.locallist=res.resultList
                this.loading=false
            })
        },

        // 搜索事件
        search(){
            this.relationList=this.locallist
            this.searchResult=[]
            console.log(this.searchKeyword)
            for(let i=0;i<this.relationList.length;i++){
                if(this.relationList[i].organization_name.indexOf(this.searchKeyword) >-1){
                    this.searchResult.push(this.relationList[i])
                    this.searchResultRecords+=1
                }
            }
            this.relationList=this.searchResult
            this.totalRecords=this.searchResultRecords
        },
        // 重置搜索框
        resetsearch(){
            this.searchKeyword=""
            this.getRelationList()
        },

        // 新增
        addRelation(){
            this.$refs.addRelationFormRef.validate(valid =>{
                if(!valid) return
                request("post","/Organization_Relation/InsertStatus",this.addRelationForm)
                .then(res =>{
                    console.log(res)
                    this.addDialog=false
                    this.getRelationList()
                    // 提示
                    if(res.result==1){
                        this.$message({
                            type: 'success',
                            message: res.resultDesc,
                        });
                    }
                    else{
                        this.$message({
                            type: 'warning',
                            message: res.resultDesc,
                        });
                    }
                })
            })
        },
            // 请求来父集团信息
            getpOrganization(){
                request("post","/Organization_Info/GetEntInfo",this.relationInfo)
                .then(res =>{
                    console.log(res)
                    this.pOrganization=res.resultList
                })
            },
            // 请求来子集团信息
            getcOrganization(){
                request("post","/Organization_Info/GetEntInfo",this.relationInfo)
                .then(res =>{
                    console.log(res)
                    this.cOrganization=res.resultList
                })
            },

        // 点击集团名称获得该行organization_id
        RelationDialog(id,name){
            this.relationDialog=true
            this.f_organization_pid=id
            this.f_organization_pname=name
            console.log(id)
        },


        // 分页的设置
        // 一页几条
        handleSizeChange(newSize){
            console.log(newSize)
            this.pageSize=newSize
        },
        // 点击设置第几页
        handleCurrentChange(newPage){
            console.log(newPage)
            this.pageIndex=newPage
        }
    }
}
</script>

<style scoped>
.el-card{
    height: 100%;
    margin-top: 20px;
    background-color: #F5F7FB;
}
.wrapper{
    padding: 40px 30px 20px;
    background-color: white;
}

/* 对话框 */
.el-form{
    padding-right:30px;
}
.el-form .el-form-item .el-input,.el-select{
    width: 100%;
}

/* 分页 */
.page{
    background-color: white;
}
.el-pagination{
    padding-top: 20px;
}

/* 搜索布局开始 */
.search{
    width: 100%;
    margin-bottom: 40px;
}
.search .el-button{
    color: #0846B9;
}
.search .search-up{
    margin-top: 20px;
    text-align: right;
}
.search-up>span{
    margin-right: 20px;
}
.search-down{
    background-color: white;
    /* margin-top: 20px; */
    margin-top: -20px;
    padding: 30px 130px;
    text-align: left;
}
.search-input{
    width: 400px;
}
.search-down-btn{
    margin: 20px 0px 0px 400px;
    width: 130px;
}
.i{
    text-align: right;
    margin-right: 90px;
}
.el-icon-caret-top{
    font-size: 50px;
    margin-top: -10px;
    color: white;
}

/* 表格列的链接的下划线设置 */
.el-table .el-button{
    text-decoration: underline;
}
</style>